<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<!--
    Copyright 2009,2010,2011 Roland Bouman
    (Roland.Bouman@gmail.com, http://rpbouman.blogspot.com/, http://code.google.com/p/xmla4js)

    yui-chart-wizard.html - this software is part of xmla4js

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Lesser General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>xmla4js: YUI Chart Wizard</title>
        <!--
            YUI config: http://developer.yahoo.com/yui/articles/hosting/?charts&datasource&datatable&dragdrop&element&json&reset-fonts-grids&swf&yahoo&yahoo-dom-event&MIN
        -->
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/datatable/assets/skins/sam/datatable.css"/>
        <link rel="stylesheet" type="text/css" href="../css/default.css"/>
        <style type="text/css">
            #header {
            }
            .left-col {
                width: 33.32%;
                float: left;
            }
            .middle-col {
                width: 33.32%;
                float: left;
            }
            .right-col {
                width: 33.32%;
                float: left;
            }
            .mid-right-col {
                width: 50%;
                float: left;
            }
            .mid-left-col {
                width: 50%;
                float: left;
            }
            .footer {
                clear: both;
            }
            #url {
                position:relative;
                left: 3em;
                width:40em;
            }
            #button_discover_datasources {
                float: right;
            }
            #button_render_chart {
                float: right;
            }

            #url,
            #select_datasource,
            #select_catalog,
            #select_cube,
            #select_chart_type {
                position:relative;
                left: 7em;
            }
            #section_chart {
                width: 500px;
                height: 350px;
                margin-bottom: 10px;
            }

            label {
                position:absolute;
            }
        </style>
    </head>
    <body class="yui-skin-sam">
        <div id="header">
            <div>
                <a href="../index.html">Home</a>
                |
                <a href="http://code.google.com/p/xmla4js/">Google Code Project page</a>
                |
                <a href="index.html">Samples</a>
                |
                <a href="../doc/api/index.html">API Reference Documentation</a>
            </div>
            <h1>Sample: YUI Chart wizard<img style="display:none" id="image_ajax_loader" src="../css/ajax-loader.gif"/></h1>
            <fieldset>
                <legend>XML/A Service</legend>
                <label>URL:</label>
                <input id="url" value="http://localhost:8080/pentaho/Xmla?userid=joe&amp;password=password"/>
                <button id="button_discover_datasources">Discover Datasources...</button>
            </fieldset>
        </div>
        <div class="left-col">
            <fieldset>
                <legend>Datasource</legend>
                <div>
                    <label>Datasource:</label>
                    <select id="select_datasource"></select>
                </div>
                <div>
                    <label>Catalog:</label>
                    <select id="select_catalog"></select>
                </div>
                <div>
                    <label>Cube:</label>
                    <select id="select_cube"></select>
                </div>
            </fieldset>
        </div>
        <div class="middle-col">
            <fieldset>
                <legend>Measures:</legend>
                <select multiple="true" id="select_measures"></select>
            </fieldset>
        </div>
        <div class="right-col">
            <fieldset>
                <legend>Dimensions:</legend>
                <select multiple="true" id="select_hierarchies"></select>
            </fieldset>
        </div>
        <div class="footer">
        </div>
        <div class="mid-left-col">
            <fieldset
                style="
                    position: relative;
                "
            >
                <legend>Chart</legend>
                <div>
                    <label>Type:</label>
                    <select id="select_chart_type">
                        <option value="BarChart">BarChart</option>
                        <option value="ColumnChart">ColumnChart</option>
                        <option value="LineChart">LineChart</option>
                        <option value="PieChart">PieChart</option>
                        <option value="StackedBarChart">StackedBarChart</option>
                        <option value="StackedColumnChart">StackedColumnChart</option>
                    </select>
                    <button id="button_render_chart">Render...</button>
                </div>
                <pre id="section_query"></pre>
                <div id="section_table"></div>
            </fieldset>
        </div>
        <div class="mid-right-col">
            <div id="section_chart"></div>
        </div>

        <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js&2.8.0r4/build/datasource/datasource-min.js&2.8.0r4/build/element/element-min.js&2.8.0r4/build/json/json-min.js&2.8.0r4/build/swf/swf-min.js&2.8.0r4/build/charts/charts-min.js&2.8.0r4/build/dragdrop/dragdrop-min.js&2.8.0r4/build/datatable/datatable-min.js"></script>
        <script type="text/javascript" src="../src/Xmla.js"></script>
        <script type="text/javascript" src="defaultXmlaUrl.js"></script>
        <script type="text/javascript">
            document.getElementById("url").value = defaultXmlaUrl;
        </script>

        <script type="text/javascript">
            /*
            *   references to the DOM
            */
            var button_discover_datasources = document.getElementById("button_discover_datasources"),
                button_render_chart         = document.getElementById("button_render_chart"),
                url                   = document.getElementById("url"),
                select_datasource           = document.getElementById("select_datasource"),
                select_catalog              = document.getElementById("select_catalog"),
                select_cube                 = document.getElementById("select_cube"),
                select_measures             = document.getElementById("select_measures"),
                select_hierarchies          = document.getElementById("select_hierarchies"),
                select_chart_type           = document.getElementById("select_chart_type"),
                section_chart               = document.getElementById("section_chart"),
                section_query               = document.getElementById("section_query"),
                image_ajax_loader           = document.getElementById("image_ajax_loader"),
            /*
            *   local caches
            */
                datasources                 = null,
                hierarchies                 = null,
                measures                    = null,
            /*
            *   misc
            */
                xmla                        = new Xmla({async: true}),
                dataSource;

                YAHOO.widget.Chart.SWFURL   =  "http://yui.yahooapis.com/2.9.0/build/charts/assets/charts.swf";

            /*
            *   Functions to populate objects with data from xmla
            */
            function getSelectValue(select){    //in normal browsers, we can do select.value. Why IE8 wants us to write a funcion like this?
                var value;
                if (select.options.length) {
                    value = select.options[select.selectedIndex].value;
                }
                else {
                    value = null;
                }
                return value;
            }

            function populateSelect(config){
                while (config.select.options.length){
                    config.select.removeChild(config.select.firstChild);
                }
                for (var option, text = "", i=0; i<config.options.length; i++){
                    option = document.createElement("OPTION");
                    text = config.options[i][config.text];
                    option.innerHTML = text;
                    option.value = text;
                    config.select.appendChild(option);
                }
                if (i) {
                    config.select.selectedIndex = 0;
                }
            }

            function populateDatasources(rowset){
                datasources = rowset.fetchAllAsObject();
                populateSelect({
                    select: select_datasource,
                    options: datasources,
                    text: "DataSourceName"
                });
                rowset.close();
                select_datasource.onchange();
            }

            function populateCatalogs(rowset){
                var catalogs = rowset.fetchAllAsObject();
                populateSelect({
                    select: select_catalog,
                    options: catalogs,
                    text: "CATALOG_NAME"
                });
                rowset.close();
                select_catalog.onchange();
            }

            function populateCubes(rowset){
                var cubes = rowset.fetchAllAsObject();
                populateSelect({
                    select: select_cube,
                    options: cubes,
                    text: "CUBE_NAME"
                });
                rowset.close();
                select_cube.onchange();
            }

            function populateMeasures(rowset){
                measures = rowset.fetchAllAsObject();
                populateSelect({
                    select: select_measures,
                    options: measures,
                    text: "MEASURE_NAME"
                });
                rowset.close();

                var datasource = datasources[select_datasource.selectedIndex];

                var properties = {};
                properties[Xmla.PROP_DATASOURCEINFO] = datasource[Xmla.PROP_DATASOURCEINFO];
                properties[Xmla.PROP_CATALOG] = getSelectValue(select_catalog)

                var restrictions = {};
                restrictions["CUBE_NAME"] = getSelectValue(select_cube);
                xmla.discoverMDHierarchies({
                    url: datasource.URL,
                    properties: properties,
                    restrictions: restrictions
                });
            }

            function populateHierarchies(rowset){
                var hierarchy;
                hierarchies = [];
                while(hierarchy = rowset.fetchAsObject()){
                    if (hierarchy["DIMENSION_TYPE"]==Xmla.Rowset.MD_DIMTYPE_MEASURE){
                        continue;
                    }
                    hierarchies.push(hierarchy);
                }
                populateSelect({
                    select: select_hierarchies
                ,   options: hierarchies
                ,   text: "HIERARCHY_NAME"
                });
                rowset.close();
            }

            function getYUIDataSource(xmlaRowset){
                var fieldNames = xmlaRowset.getFieldNames()
                var data = xmlaRowset.fetchAllAsObject();
                var yuiDataSource = new YAHOO.util.DataSource(data);
                yuiDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
                yuiDataSource.responseSchema = {
                    fields: fieldNames
                }
                return yuiDataSource;
            }

            function renderYUIDataTable(xmlaRowset, yuiDataSource){
                var columnDefs = [];
                var fieldNames = xmlaRowset.getFieldNames();
                for (var i=0, num=fieldNames.length; i<num; i++){
                    columnDefs[i] = {
                        key: fieldNames[i],
                        resizeable: true,
                        sortable: true
                    };
                }
                var yuiDataTable = new YAHOO.widget.DataTable(
                    "section_table",
                    columnDefs,
                    yuiDataSource,
                    {}
                );
            }

            function renderYUIChart(xmlaRowset, yuiDataSource){
                var chartType = getSelectValue(select_chart_type);
                var fieldNames = xmlaRowset.getFieldNames();
                var _constructor = YAHOO.widget[chartType];

                var config = {
                    series: [],
                    style: {
                        legend: {display: "right" }
                    }
                }
                var seriesObject, bar;
                switch (chartType) {
                    case "BarChart":
                    case "StackedBarChart":
                        bar = true;
                    case "ColumnChart":
                    case "StackedColumnChart":
                    case "LineChart":
                        for (var i=0, num = select_measures.length; i<num; i++){
                            if (select_measures[i].selected){
                                metric = fieldNames[fieldNames.length - (config.series.length + 1)];
                                seriesObject = {displayName: metric};
                                seriesObject[bar?"xField":"yField"] = metric;
                                config.series.push(seriesObject);
                                config[bar?"yField":"xField"] = fieldNames[fieldNames.length - (config.series.length+1)];
                            }
                        }
                        break;
                    case "PieChart":
                        config.dataField = fieldNames[fieldNames.length -1];
                        config.categoryField = fieldNames[0];
                        config.series.push({});
                        break;
                }

                var yuiChart = new _constructor(
                    "section_chart",
                    yuiDataSource,
                    config
                );
            }

            function render_graph(xmlaRowset){
                var yuiDataSource = getYUIDataSource(xmlaRowset);
                renderYUIDataTable(xmlaRowset, yuiDataSource);
                renderYUIChart(xmlaRowset, yuiDataSource);
            }

            /*
            *   Xmla event Handlers
            */
            function initAjaxLoader(){
                xmla.addListener({
                    events: Xmla.EVENT_GENERAL,
                    handler: function(eventName){
                        var display;
                        switch (eventName) {
                            case Xmla.EVENT_REQUEST:
                                display = "";
                                break;
                            case Xmla.EVENT_SUCCESS:
                            case Xmla.EVENT_ERROR:
                                display = "none";
                                break;
                        }
                        image_ajax_loader.style.display = display;
                    }
                });
            }
            function initDiscoverEvents(){
                xmla.addListener({
                    events: Xmla.EVENT_DISCOVER_SUCCESS,
                    handler: function(eventName, eventData){
                        var requestType = eventData.requestType;
                        switch (requestType) {
                            case Xmla.DISCOVER_DATASOURCES:
                                populateDatasources(eventData.rowset);
                                break;
                            case Xmla.DBSCHEMA_CATALOGS:
                                populateCatalogs(eventData.rowset);
                                break;
                            case Xmla.MDSCHEMA_CUBES:
                                populateCubes(eventData.rowset);
                                break;
                            case Xmla.MDSCHEMA_HIERARCHIES:
                                populateHierarchies(eventData.rowset);
                                break;
                            case Xmla.MDSCHEMA_MEASURES:
                                populateMeasures(eventData.rowset);
                                break;
                        }
                    }
                });
            }
            function initExecuteEvents(){
                xmla.addListener({
                    events: Xmla.EVENT_EXECUTE_SUCCESS,
                    handler: function(eventName, eventData){
                        var properties = eventData.properties;
                        switch (properties[Xmla.PROP_FORMAT]){
                            case Xmla.PROP_FORMAT_TABULAR:
                                render_graph(eventData.resultset);
                                break;
                            case Xmla.PROP_FORMAT_MULTIDIMENSIONAL:
                                break;
                            default:
                        }
                    }
                });
            }
            /*
            *   DOM event Handlers
            */
            function button_discover_datasources_onclick(){
                select_datasource.innerHTML = "";
                select_catalog.innerHTML = "";
                select_cube.innerHTML = "";
                select_measures.innerHTML = "";
                xmla.discoverDataSources({
                    url: url.value
                });
            }

            function select_datasource_onchange(){
                if (!select_datasource.options.length || !datasources.length){
                    return;
                }
                var datasource = datasources[select_datasource.selectedIndex];

                var properties = {};
                properties[Xmla.PROP_DATASOURCEINFO] = datasource[Xmla.PROP_DATASOURCEINFO];

                xmla.discoverDBCatalogs({
                    url: datasource.URL,
                    properties: properties
                });
            }

            function select_catalog_onchange(){
                if (!select_catalog.options.length){
                    return;
                }
                var datasource = datasources[select_datasource.selectedIndex];

                var properties = {};
                properties[Xmla.PROP_DATASOURCEINFO] = datasource[Xmla.PROP_DATASOURCEINFO];
                properties[Xmla.PROP_CATALOG] = getSelectValue(select_catalog);

                xmla.discoverMDCubes({
                    url: datasource.URL,
                    properties: properties
                });
            }

            function select_cube_onchange(){
                if (!select_cube.options.length){
                    return;
                }
                var datasource = datasources[select_datasource.selectedIndex];

                var properties = {};
                properties[Xmla.PROP_DATASOURCEINFO] = datasource[Xmla.PROP_DATASOURCEINFO];
                properties[Xmla.PROP_CATALOG] = getSelectValue(select_catalog);

                var restrictions = {};
                restrictions["CUBE_NAME"] = getSelectValue(select_cube);

                xmla.discoverMDMeasures({
                    url: datasource.URL,
                    properties: properties,
                    restrictions: restrictions
                });
            }

            function button_render_chart_onclick(){
                var mdx = "SELECT\n";
                var cols = "", rows = "";
                for (var measure, i=0, num = select_measures.length; i<num; i++){
                    measure = select_measures[i];
                    if (measure.selected){
                        if (cols!=""){
                            cols += ","
                        }
                        cols += "[Measures].[" + measure.value + "]";
                    }
                }
                mdx += "\n{" + cols + "} ON COLUMNS,\n";
                for (var hiearchy, i=0, num = select_hierarchies.length; i<num; i++){
                    hierarchy = select_hierarchies[i];
                    if (hierarchy.selected){
                        if (rows!=""){
                            rows += "*";
                        }
                        hierarchy = hierarchies[i];
                        rows += hierarchy["DEFAULT_MEMBER"] + ".Children"
                    }
                }
                mdx += "\n{" + rows + "} ON ROWS\n";
                mdx += "FROM [" + getSelectValue(select_cube) + "]";
                section_query.innerHTML = mdx;
                var datasource = datasources[select_datasource.selectedIndex];
                var properties = {};
                properties[Xmla.PROP_DATASOURCEINFO] = datasource[Xmla.PROP_DATASOURCEINFO];
                properties[Xmla.PROP_CATALOG] = getSelectValue(select_catalog);
                properties[Xmla.PROP_FORMAT] = Xmla.PROP_FORMAT_TABULAR;
                xmla.execute({
                    url: datasource.URL,
                    properties: properties,
                    statement: mdx
                });
            }

            function select_chart_type_onchange(){
                switch (getSelectValue(select_chart_type)) {
                    case "BarChart":
                        break;
                    case "PieChart":

                        break;
                    case "Scatterplot":
                        break;
                }
            }
            /*
            *   Initialization
            */
            function init(){

                initAjaxLoader();
                initDiscoverEvents();
                initExecuteEvents();

                button_discover_datasources.onclick = button_discover_datasources_onclick;
                button_render_chart.onclick         = button_render_chart_onclick;

                select_datasource.onchange          = select_datasource_onchange;
                select_catalog.onchange             = select_catalog_onchange;
                select_cube.onchange                = select_cube_onchange;
                select_chart_type.onchange               = select_chart_type_onchange;

            }

            YAHOO.util.Event.addListener(window, "load", function() {
                init();
            });
        </script>
    </body>
</html>
